<template>
  <view class="order-detail">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="left" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <view class="title">订单详情</view>
      <view class="right" @tap="shareOrder">
        <text class="iconfont icon-share"></text>
      </view>
    </view>

    <!-- 订单状态和金额 -->
    <view class="status-section">
      <view class="status-header">
        <text class="status-text">{{ order.status || "-" }}</text>
      </view>
      <view class="order-price">在线支付 ￥{{ order.totalAmount }}</view>
      <view class="order-no">订单号：{{ order.orderNumber }}</view>
    </view>

    <!-- 酒店信息 -->
    <view class="info-section">
      <image
        :src="order.roomImage"
        mode="aspectFill"
        style="
          width: 100%;
          height: 200rpx;
          border-radius: 12rpx;
          margin-bottom: 20rpx;
        "
      />
      <view class="info-title">{{ order.name }}</view>
      <view class="info-item">
        <text class="label">地址</text>
        <text class="value">{{ order.address }}</text>
      </view>
      <view class="info-item">
        <text class="label">入住时间</text>
        <text class="value">{{ order.checkInDate }}</text>
      </view>
      <view class="info-item">
        <text class="label">离店时间</text>
        <text class="value">{{ order.checkOutDate }}</text>
      </view>
      <view class="info-item">
        <text class="label">房型</text>
        <text class="value">{{ order.roomType }} x{{ order.roomCount }}</text>
      </view>
      <view class="info-item">
        <text class="label">备注</text>
        <text class="value">{{ order.remark }} </text>
      </view>
    </view>

    <!-- 预订人信息 -->
    <view class="info-section">
      <view class="info-title">预订信息</view>
      <view class="info-item">
        <text class="label">联系人</text>
        <text class="value">{{ order.guestName }}</text>
      </view>
      <view class="info-item">
        <text class="label">手机号</text>
        <text class="value">{{ order.guestPhone }}</text>
      </view>
      <view class="info-item">
        <text class="label">合同信息</text>
        <text class="value link" @tap="showContractDetails">电子合同</text>
      </view>
    </view>

    <!-- 保险 -->
    <view class="info-section" v-if="order.insurance">
      <view class="info-title">保险</view>
      <view class="insurance-info">
        <text>{{ order.insurance }}</text>
        <text class="count" v-if="order.insuranceCount"
          >x{{ order.insuranceCount }}</text
        >
      </view>
    </view>

    <!-- 退改规则 -->
    <view class="info-section">
      <view class="info-title">退改规则</view>
      <view class="refund-rules">
        <view
          class="rule-item"
          v-for="(rule, index) in order.refundRule"
          :key="index"
        >
          <text class="rule-text">{{ rule }}</text>
        </view>
      </view>
    </view>

    <!-- 底部说明 -->
    <view class="bottom-tips">
      <text>本产品由北京故宫文化发展有限公司提供</text>
    </view>
  </view>
</template>

<script>
import { orderDetail } from "@/api/system/order.js";
import config from "@/config";

export default {
  data() {
    return {
      baseUrl: config.baseUrl,
      order: {},
    };
  },
  onLoad(options) {
    const id = Number(options.id);
    this.getOrderDetail(id);
  },
  methods: {
    getOrderDetail(id) {
      orderDetail(id).then((res) => {
        this.order = res.data;
        //处理图片
        this.order.roomImage =  this.order.roomImage;
        //处理订单状态
        this.order.status = this.statusClass(this.order.status);
      });
    },
    statusClass(status) {
      switch (status) {
        case "0":
          return "待付款";
        case "1":
          return "未使用";
        case "2":
          return "已使用";
        case "3":
          return "已取消";
        default:
          return "未知状态";
      }
    },
    goBack() {
      uni.redirectTo({
        url: "/pages/order/orders",
      });
    },
    shareOrder() {
      uni.showToast({ title: "分享功能开发中", icon: "none" });
    },
    showContractDetails() {
      uni.showToast({ title: "合同详情功能开发中", icon: "none" });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background-color: #2196f3;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;

  .left,
  .right {
    width: 60rpx;
    display: flex;
    align-items: center;
    .iconfont {
      color: #fff;
      font-size: 40rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #fff;
  }
}

.status-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;

  .status-header {
    margin-bottom: 20rpx;
    .status-text {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }
  .order-price {
    font-size: 36rpx;
    font-weight: bold;
    color: #f56c6c;
    margin-bottom: 10rpx;
  }
  .order-no {
    font-size: 28rpx;
    color: #666;
  }
}

.info-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .info-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .label {
      font-size: 28rpx;
      color: #666;
    }
    .value {
      font-size: 28rpx;
      color: #333;
    }
    .copy-text {
      color: #2196f3;
    }
    .link {
      color: #2196f3;
    }
  }
  .refund-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    .rule-item {
      background-color: #f5f5f5;
      padding: 10rpx 20rpx;
      border-radius: 8rpx;
      .rule-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  .insurance-info {
    font-size: 28rpx;
    color: #333;
    .count {
      margin-left: 20rpx;
      color: #666;
    }
  }
}
.bottom-tips {
  text-align: center;
  color: #999;
  font-size: 24rpx;
  padding: 30rpx 0 0 0;
}
</style>